/**
 * 组件：搜索过滤组件
 * @author:Colin3dmax
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';
import Util from '../utils/util';
import MessageBuble from './comp.message-say-bubble'
import IconButton from './../component/comp.icon-button'
import ImageButton from './../component/comp.image-button'
import InputBox from './../component/comp.input-box'
import VoiceBox from './../component/comp.voice-box'

class OrderFilterPanel extends Component {

    static propTypes = {
        onPressShowMore:PropTypes.func,
    }

    static defaultProps = {
        onPressShowMore:null,
    }

    constructor(props) {
        super(props)
        this.state = {
            isKeyboardMode: true,
            activeOrder: '综合排序',
        }
    }

    componentDidMount() {

    }

    onPressActiveOrderButton(orderName) {
        let activeText = null;
        this.setState({
            activeOrder: orderName,
        });
    }


    genBtnCommonOrderUI(title) {
        const {activeOrder} = this.state
        let activeText = null;
        if (title == activeOrder) {
            activeText = styles.btnOrderActiveText
        }
        return (
            <IconButton title={title} style={styles.btnCommonOrder} textStyle={[styles.btnCommonOrderText, activeText]}
                        onPress={this.onPressActiveOrderButton.bind(this, title)}/>
        );
    }

    onPressShowMoreButton = () => {
        const {onPressShowMore} = this.props;
        if(onPressShowMore){
            onPressShowMore();
        }

    }

    genBtnFilterMoreUI() {
        return (
            <IconButton iconAlign='right' title="筛选" style={styles.btnFilterMore} textStyle={styles.btnFilterMoreText}
                        iconSource={require('./../../img/icon_small_filter.png')} onPress={this.onPressShowMoreButton}/>
        );
    }

    genInputBarUI() {
        return (
            <View style={styles.inputBar}>
                {this.genBtnCommonOrderUI('综合排序')}
                {this.genBtnCommonOrderUI('热门排序')}
                {this.genBtnCommonOrderUI('人气排序')}
                {this.genBtnFilterMoreUI()}
            </View>
        );
    }



    render() {
        return (
            <View style={styles.container}>
                {this.genInputBarUI()}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        // borderWidth:1,
    },
    inputBar: {
        paddingTop: 8,
        paddingBottom: 8,
        maxHeight: 85,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'flex-end',
        justifyContent: 'space-between',
        paddingLeft: 8,
        paddingRight: 8,
        borderTopWidth: Util.getRealPixel(1),
        borderBottomWidth: Util.getRealPixel(1),
        borderTopColor: '#CBCBCC',
        borderBottomColor: '#DCDCDC',
    },
    btnImagePanel: {
        width: 33,
        height: 33,
        alignItems: 'center',
        justifyContent: 'center',
    },
    btnCommonOrder: {
        marginRight: 5,
        backgroundColor: 'transparent',
    },
    btnCommonOrderText: {
        color: '#636363',
    },
    btnSellOrder: {
        marginRight: 5,
        backgroundColor: 'transparent',
    },
    btnSellOrderText: {
        color: '#636363',
    },
    btnOrderActiveText: {
        color: '#F55608',
    },
    btnEmoji: {
        marginLeft: 5,
    },
    btnFilterMore: {
        marginLeft: 5,
        backgroundColor: 'transparent',
        borderLeftColor: '#DCDCDC',
        borderLeftWidth: Util.getRealPixel(1),
        borderRadius: 0,
        paddingLeft: 16,
    },
    btnFilterMoreText: {
        color: '#636363',
    },


});

export default OrderFilterPanel;